<template>
	<view>
		<u-navbar :titleStyle="{color: titleColor, fontWeight: 'bold', letterSpacing: '2rpx', fontSize: '36rpx'}" :bgColor="bgColor" title="嘿慧养" leftIconSize="0">
			<u--image slot="left" mode="aspectFill" :src="appInfo.logo[0].url" width="64rpx" height="64rpx"></u--image>
		</u-navbar>
		<scroll-view @scroll="handleScroll" :scroll-y="true" :style="{height: scrollViewHeight}">
			<!-- 头部 -->
			<view class="app-header" :style="{height: header.height}">
				<u--image mode="aspectFill" :src="header.bgc" width="100%" :height="header.height"></u--image>
				<view class="header-title" @click="handleShowContent">
					<view class="header-title-text">项目名称: {{appInfo.name || ''}} <text style="font-size: 44rpx; position: relative;top: 6rpx;left: 4rpx;" class="iconfont icon-gengduo"></text> </view>
				</view>
				<view class="header-date-box">
					<view class="header-date-1">{{curDate}}</view>	
					<view class="header-date-2">
						<view class="header-date-item">
							<u--image mode="aspectFill" src="https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/header-img2.png" width="48rpx" height="48rpx"></u--image>
							<view style="padding-left: 8rpx;">
								<text>牲舍: </text>
								<text class="num">{{appInfo.count || 0}}个</text>
							</view>
						</view>
						<view class="header-date-item">
							<u--image mode="aspectFill" src="https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/header-img1.png" width="48rpx" height="48rpx"></u--image>
							<view style="padding-left: 8rpx;">
								<text>品种: </text>
								<text class="num">{{appInfo.variety || ''}}</text>
							</view>
						</view>
					</view>	
				</view>
			</view>
			
			<!-- 环境监测 -->
			<view class="app-content-box">
				<HomeTitle title="养殖区视频"/>
				<template v-if="appInfo.video">
					<!-- 视频 -->
					<view style="height: 32rpx;"/>
					<JoyVideo :playInfo="appInfo.video[0]"/>
					<view style="height: 32rpx;"/>
				</template>
				<HomeTitle title="养殖区气候"/>
				<view class="weather-box">
					<view class="weather-title">
						<view :class="['weather-item', i === 0 ? null : 'active']" v-for="(date, i) in weatherDate" :key="i">
							<u--image mode="aspectFill" :src="`https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/${getImg(date.icon)}.png`" width="40rpx" height="30rpx"></u--image>
							<text class="weather-date">{{date.date.split('/')[1]}}</text>	
							<text class="weather-week">{{date.week}}</text>	
						</view>
					</view>
					<view class="weather-chart">
						<qiun-data-charts :canvas2d='true' canvasId='canvans7' tooltipFormat="tooltipDemo1" type="line" :opts="opts" :chartData="chartData" />
					</view>
				</view>
				<template v-if="markers.length > 0">
					<HomeTitle title="养殖区位置"/>
					<view class="yz-box">
						<map :scale="15" enable-satellite :polygons="markers" style="width: 100%; height: 362rpx;" :latitude="latitude" :longitude="longitude"></map>
						<view class="map-title" :style="{backgroundColor: appColor + 'CC'}">
							<text>占地{{square}}</text>
						</view>
					</view>
				</template>
				<HomeTitle title="样板养殖区" :isLink="true" @more="more({url: '/pages/home/moreVideo'})"/>
				<view class="video-box">
					<view @click="toVideo(video)" class="video-item" v-for="(video, index) in cameraList" :key="index">
						<view class="video-item1">
							<u--image mode="aspectFill" :src="video.cover" width="100%" height="215rpx"></u--image>
							<view class="video-item1-btn">
								<text class="iconfont icon-24gl-playCircle" style="color: #fff; font-size: 62rpx;"></text>
							</view>
						</view>
						<view class="video-item-title" :style="{backgroundColor: appColor}">{{video.name}}</view>	
					</view>
				</view>
				<HomeTitle title="认养流程图"/>
				<view class="yz-box" @click="previewImg(0, [{url: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/%E8%AE%A4%E5%85%BB%E6%B5%81%E7%A8%8B.png'}])">
					<u--image mode="aspectFill" src="https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/%E8%AE%A4%E5%85%BB%E6%B5%81%E7%A8%8B.png" width="100%" height="600rpx"></u--image>
				</view>
			</view>	
		</scroll-view>
		<u-modal @confirm="showContent = false" :confirmColor="appColor" width="620rpx" :show="showContent" title="项目简介" :content='appInfo.introduction'></u-modal>
	</view>
</template>

<script>
	import HomeTitle from '@/components/homeTitle';
	import {mapState, mapActions} from 'vuex';
	import {formatTime, dateGet} from '@/utils/index.js'
	import {getSensor, getWeather, getCamera} from '@/api/home.js'
	import JoyVideo from '@/components/joyVideo';
	export default {
		components: {
			HomeTitle,
			JoyVideo
		},
		data() {
			return {
				showContent: false, // 项目简介对话框
				titleColor: '#fff',
				bgColor: 'transparent',
				videoSrc: '',
				markers: [],
				sensorList: [], // 温湿度
				cameraList: [], // 摄像头
				weatherDate: [], // 最近5天天气
				curDate: '',
				// 头部
				header: {
					bgc: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/header-bgc.png',
					height: '560rpx',
					titleLogo: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/jishe-title.png',
					title: '姜家智慧养鸡',
					logo: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/logo.png'
				},
				listYz: [
					{name: '蔡家寺村'},
					{name: '水源村'},
				],
				latitude: 39.909,
				longitude: 116.39742,
				chartData: {},
				opts: {
					fontColor: '#fff',
					color: ["rgb(255, 222, 90)", "rgb(68, 255, 143)"],
					padding: [30, -20, 20, -16],
					dataPointShapeType: 'hollow',
					legend: {
						show: false
					},
					xAxis: {
						axisLine: false,
						disabled: false,
						disabled: true,
					},
					yAxis: {
						disableGrid: true,
						disabled: true
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
						},
						tooltip: {
							splitLine: false,
							showArrow: false
						},
					}
				},
				square: 0
			}
		},
		computed: {
			...mapState(['appInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 50 - 1 + this.statusBarHeight + 'px';
				// return this.scrollHeight - 44 - 50 - 1 + 'px';
			},
			statusBarHeight1() {
				return this.statusBarHeight + 8 + 'px'
			}
		},
		mounted() {
			// 时间
			this.getDate();
			// 天气
			this.getWeather();
			// 封面
			this.getCamera();
			// 地图标记
			const {region, name} = this.appInfo;
			const {latLng, square} = region[0];
			this.square = square;
			this.latitude = latLng[0].lat;
			this.longitude = latLng[0].lng;
			// const INIT_MARKER = {
			// 	callout: {
			// 		content: name,
			// 		padding: 10,
			// 		borderRadius: 2,
			// 		display: 'ALWAYS'
			// 	},
			// 	latitude: latitude,
			// 	longitude: longitude,
			// 	iconPath: '../../static/img/marker.png',
			// 	width: '34px',
			// 	height: '34px',
			// 	rotate: 0,
			// 	alpha: 1,
			// 	id: 0
			// }
			// this.markers = [
			// 	{...INIT_MARKER}
			// ]
			let points = [];
			latLng.forEach(item => {
				const {lat: latitude, lng: longitude} = item;
				points.push({latitude, longitude})
			});
			this.points = points;
			const initLine = {
				points: points,
				strokeWidth: 2,
				fillColor: this.appColor + '4D',
				strokeColor: this.appColor
			}
			this.markers = [
				{...initLine}
			];
		},
		methods: {
			...mapActions(['setDetail']),
			// 预览图片
			previewImg(current, urls) {
				urls = urls.map(item => item.url);
				uni.previewImage({
					current,
					urls,
				});
			},
			// 展示项目简介
			handleShowContent() {
				this.showContent = true;
			},
			handleScroll({detail}) {
				if (detail.scrollTop > 100) {
					this.titleColor = '#000';
					this.bgColor = '#fff';
				} else {
					this.titleColor = '#fff';
					this.bgColor = 'transparent';
				}
			},
			// 视频
			toVideo(video) {
				let url = '/pages/home/controlVideo';
				this.setDetail({detail: video})
				this.$cuNavigateTo(url)
			},
			getImg(icon) {
				let icons = ['CLEAR', 'CLOUDY', 'RAIN', 'SNOW'];
				if(icons.includes(icon)) {
					return icon
				}
				return 'CLOUDY'
			},
			more({url}) {
				this.$cuNavigateTo(url);
			},
			getDate() {
				const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				let cur = new Date();
				let year = cur.getFullYear();
				let month = cur.getMonth() + 1;
				let day = cur.getDate();
				let week = cur.getDay();
				this.curDate = `${year}年${month}月${day}日 ${weeks[week]}`;
			},
			getWeather() {
				getWeather().then(res => {
					let categories = [];
					let tmpMax = [];
					let tmpMin = [];
					let weatherDate = []
					let {temperature, skycon} = res.result.daily;
					let dates = dateGet(0, 5);
					dates.forEach((item, index) => {
						categories.push(item.date);
						tmpMax.push(temperature[index].max);
						tmpMin.push(temperature[index].min);
						weatherDate.push(Object.assign({icon: skycon[index].value}, item))
					})
					this.weatherDate = weatherDate;
					
					let data = {
						categories: categories,
						series: [
						  {
							name: "最高气温",
							data: tmpMax,
							textOffset: -4,
							textColor: 'rgb(255, 222, 90)',
							format: 'seriesDemo1'
						  },
						  {
						  	name: "最低气温",
						  	data: tmpMin,
							textOffset: -4,
							textColor: 'rgb(68, 255, 143)',
							format: 'seriesDemo1'
						  },
						  
						]
					}
					this.chartData = JSON.parse(JSON.stringify(data));
				})
			},
			getCamera() {
				getCamera().then(res => {
					this.cameraList = res.result;
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.charts-box {
	    width: 100%;
	    height: 100%;
	}
	.app-header {
		position: relative;
		.app-logo {
			position: absolute;
			left: 32rpx;
			top: 60rpx;
			height: 54rpx;
			display: flex;
			align-items: center;
			.app-logo-title {
				color: #fff;
				padding-left: 8rpx;
				font-size: 26rpx;
			}
		}
		.header-title {
			position: absolute;
			left: 32rpx;
			top: 200rpx;
			// width: 308rpx;
			height: 60rpx;
			background: linear-gradient(123.93deg, rgba(241, 100, 69, 1) 0%, rgba(238, 132, 88, 1) 100%);
			border: 1rpx solid rgba(255, 230, 143, 1);
			box-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.16);
			border-radius: 0px 30rpx 30rpx 0px;
			display: flex;
			align-items: center;
			padding: 0 16rpx;
			.header-title-text {
				// width: calc(100% - 72rpx);
				// padding-left: 16rpx;
				// color: rgba(255, 237, 178, 1);
				color: #fff;
				font-size: 30rpx;
				line-height: 30rpx;
				position: relative;
				top: -2rpx;
			}
		}
		.header-date-box {
			position: absolute;
			height: 120rpx;
			width: calc(100% - 64rpx);
			left: 32rpx;
			bottom: 0;
			background: linear-gradient(123.93deg, rgba(241, 100, 69, 1) 0%, rgba(238, 132, 88, 1) 100%);
			border-radius: 24rpx 24rpx 0 0;
			.header-date-1 {
				padding: 16rpx 32rpx;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #fff;
			}
			.header-date-2 {
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.header-date-item {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #fff;
					.num {
						font-size: 28rpx;
						padding-left: 4rpx;
					}
				}
			}
		}
	}
	
	.app-content-box {
		padding: 32rpx;
		.env-box {
			margin: 32rpx 0;
			display: flex;
			justify-content: space-between;
			.env-item {
				width: 210rpx;
				height: 192rpx;
				border-radius: 10rpx;
				padding: 16rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.env-status {
					width: 56rpx;
					height: 30rpx;
					box-shadow: 0px 2rpx 3rpx rgba(0, 0, 0, 0.16);
					border-radius: 10rpx 0px 0px 10rpx;
					font-size: 20rpx;
					color: #fff;
					line-height: 30rpx;
					text-align: center;
					position: absolute;
					right: 0;
					top: 0;
				}
				.env-num {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
					color: rgba(42, 175, 96, 1);
					font-weight: bold;
					.env-unit {
						font-size: 24rpx;
						font-weight: normal;
					}
					
				}
			}
			.env-item1 {
				background: rgba(211, 238, 221, 1);
			}
			.env-item2 {
				background: rgba(241, 231, 206, 1);
				.env-num {
					color: rgba(249, 146, 8, 1)
				}
			}
			.env-item3 {
				background: rgba(254, 221, 218, 1); 
				.env-num {
					color: rgba(242, 74, 68, 1);
				}
			}
		}
		.weather-box {
			margin: 32rpx 0;
			height: 396rpx;
			padding: 32rpx;
			background: rgba(102, 159, 253, 1);
			border-radius: 10rpx;
			.weather-title {
				display: flex;
				justify-content: space-between;
				.weather-item {
					width: 88rpx;
					height: 140rpx;
					background-color: #fff;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 3px 6px rgba(67, 128, 232, 1);
					border-radius: 70rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: rgba(18, 103, 248, 1);
					.weather-date {
						font-size: 32rpx;
					}
					.weather-week {
						font-size: 18rpx;
					}
					&.active {
						opacity: 0.5;
					}
				}
			}
			.weather-chart {
				height: calc(100% - 140rpx);
			}
		}
			
		.yz-box {
			margin: 32rpx 0;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			.map-title {
				position: absolute;
				padding: 0 32rpx;
				height: 64rpx;
				top: 32rpx;
				left: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transform: translateX(-50%);
				font-size: 28rpx;
				z-index: 10;
				color: #fff;
				font-weight: bold;
				border-radius: 32rpx;
				white-space: nowrap;
			}
		}
		.video-box {
			margin: 32rpx 0;
			height: 216rpx;
			display: flex;
			justify-content: space-between;
			.video-item {
				width: 48%;
				height: 215rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				.video-item1 {
					position: relative;
					.video-item1-btn {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						z-index: 10000;
					}
					
				}
				.video-item-title {
					padding: 0 16rpx;
					position: absolute;
					left: 0;
					top: 0;
					height: 42rpx;
					line-height: 42rpx;
					text-align: center;
					border-radius: 6rpx;
					color: #fff;
					font-size: 24rpx;
					z-index: 10;
				}
			}
		}
	}
</style>
